<!-- 编辑弹窗 -->
<template>
    <ele-modal
      width="30%"
      :movable="false"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      :title="isUpdate ? '修改提成方案信息' : '添加提成方案信息'"
      @update:visible="updateVisible"
    >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  >        
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="提成类型:" prop="commissionType">
                <el-radio-group v-model="form.commissionType" @change="changeCode">                       
                  <el-radio-button v-for="(item) in codeTypes" :key="item.Key" :label="item.Key">{{ item.Value }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="提成方式:" prop="commissionMethod" >
                <el-radio-group v-model="form.commissionMethod" >                       
                  <el-radio-button v-for="(item) in commissionMethodDatas" :key="item.Key" :label="item.Key">{{ item.Value }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24" v-show="form.commissionType == 0">
              <el-form-item label="产品类型:" prop="productTypeId"  >
                <el-select  v-model="form.productTypeId" filterable clearable placeholder="请选择产品类型" style="width:100%" >
                  <el-option  v-for="item in CPLXTypeDatas" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24" >
              <el-form-item label="币种:" prop="currencyId"  >
                <el-select  v-model="form.currencyId" filterable clearable placeholder="请选择币种" style="width:100%" >
                  <el-option  v-for="item in currencyDatas" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24" >
              <el-form-item label="比例/金额:" prop="scale" >
                <el-input v-model="form.scale" >
                  <template slot="append" v-if="form.commissionMethod != 1">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" v-show="this.btnIndex!=3" :loading="loading" @click="save" v-permission="'Basic_Commissionplan_Save'">
        保存
      </el-button>
    </div>
    </ele-modal>
  </template>
  <script>


    import { isIntegerOrDecimal2 } from '@/utils/validate';
    import { QueryCommissionTypeEnum,QueryCommissionMethodEnum } from '@/api/enummanger';
    import { QueryAllChildDictViewByCode } from '@/api/systemmanager/dictmanager';
    import { AddCommission, UpdateCommission,GetCommissionById } from '@/api/basicdatamanager/commissionplan';
    export default {
      name: 'ComponentsEdit',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        // 按钮索引
        btnIndex:String,
      },
      data() {
        return {
          // 表单数据
          form: {},
          // 表单验证规则
          rules: {
            currencyId: [{required: true,message: '请选择币种',trigger: 'blur'}],
            commissionType: [{required: true,message: '请输入提成类型',trigger: 'blur'}],
            commissionMethod: [{required: true,message: '请选择提成方式',trigger: 'blur'}],
            productTypeId: [{required: true,message: '请选择产品类型',trigger: 'blur'}],
            scale: [{validator:isIntegerOrDecimal2,trigger:'blur'},{required: true,message: '请输入提成比例',trigger: 'blur'}],
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          codeTypes:[],
          CPLXTypeDatas:[],
          currencyDatas:[],
          commissionMethodDatas:[],
        };
      },

      //初始化数据
      mounted(){
        this.initDW();
      },
      methods: {
  
        /* 保存编辑 */
        save() {
          //校验必填信息
          this.$refs['form'].validate((valid) => {
            if (!valid) {return false;}

            this.loading = true;
            const saveOrUpdate = this.isUpdate ? UpdateCommission : AddCommission;
            saveOrUpdate(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.updateVisible(false);
                //回调父组件方法
                this.$emit('done');
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        },

        setData(id){
          GetCommissionById(id)
            .then((res) => {
              this.form = res; 

              if(this.form.commissionType == 1){
                this.rules.productTypeId = null;
              }
          });


      },

      changeCode(val){

        if(val==0){
          this.rules.productTypeId= [{required: true,message: '请输入产品类型',trigger: 'blur'}];
        }else{
          this.rules.productTypeId= null;
          this.form.productTypeId = null;
        }
      },

      //单位
      initDW(){
        QueryCommissionTypeEnum().then((data)=>{
            this.codeTypes = [];
            this.codeTypes = data;
        });

        QueryCommissionMethodEnum().then((data)=>{
            this.commissionMethodDatas = [];
            this.commissionMethodDatas = data;
        });

        QueryAllChildDictViewByCode(this.Constant.C_HB).then((data)=>{
            this.currencyDatas = [];
            this.currencyDatas = data;
        });

        QueryAllChildDictViewByCode(this.Constant.C_CPLX).then((data)=>{
            this.CPLXTypeDatas = [];
            this.CPLXTypeDatas = data;
        });
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },
     
    },
     
     
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data && this.data.id) {
              //赋值this.form
              this.form = {code:0,minQty:null,maxQty:null};
              this.setData(this.data.id);
              this.isUpdate = this.data.id !=null && this.data.id !=undefined;
            } else {
              this.form={code:0,minQty:null,maxQty:null};
              this.isUpdate = false;

            }
          } else {
              this.$refs['form'].clearValidate();
              this.form = {code:0,minQty:null,maxQty:null};
          }
        }
      }
    };
  </script>